<template>
  <div style="">
    <Header :left="true" leftText="返回" title="生产上料"> </Header>
    <NoticeBar
      color="#1989fa"
      background="#ecf9ff"
      style="margin-top: 5px; font-size: 15px; font-weight: bold"
      left-icon="description"
      >生产上料信息</NoticeBar
    >
    <van-cell-group>
      <van-field
        required
        v-model="form.plineid"
        label="设备条码"
        class="formstyle"
        readonly
        right-icon="scan"
        placeholder="点击扫描设备条码"
        @click="showScanner"
      />
    </van-cell-group>
    <van-form :style="autoHeight" @submit="onSubmit">
      <van-field
        required
        v-model="form.porderid"
        label="生产订单条码"
        class="formstyle"
        readonly
        right-icon="scan"
        placeholder="点击扫描生产订单条码"
        @click="showOrderScanner"
      />
      <van-field
        class="formstyle"
        v-model="form.MaterialID"
        name="物料代码"
        label="物料代码"
        placeholder="输入物料代码"
      />
      <van-field
        class="formstyle"
        v-model="form.batchno"
        name="物料批次"
        label="物料批次"
        placeholder="输入物料批次"
      />
      <van-field required class="formstyle" name="stepper" label="物料数量">
        <template #input>
          <van-stepper v-model="stepper" />
        </template>
      </van-field>

      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          color="#138087"
          native-type="submit"
          @click="confirmfeedmaterial"
          >确认上料</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import {
  Col,
  Row,
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  Toast,
  NoticeBar,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
  AddressList,
  Checkbox,
  CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient } from "@/libs/apisie";
import { _httpClient as _httpClientApi } from "@/libs/api";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);

export default {
  name: "productionmaterial",
  components: {
    Form,
    Row,
    Col,
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    VTable,
    AddressList,
    Checkbox,
    CheckboxGroup,
  },
  data() {
    return {
      stepper: 1,
      form: {
        batchno: "",
        plineid: "",
        porderid: "",
        MaterialID: "",
      },
      valuematerial: "",
      materilanumber: "",
      //columnsmaterial: [{materialid:"01", materialname:"物料一" },{materialid:"02", materialname:"物料二" },{materialid:"03", materialname:"物料三" }],
      showPickermaterial: false,
      valuepici: "",
      //columnspici: [{batchno:"01"},{batchno:"02"},{batchno:"03"}],
      showPickerpici: false,
      valuedatetime: "",
      showPickerdatetime: false,
    };
  },

  created: function () {
    this.user = JSON.parse(storage.get("user"));
    this.getFactoryID();
  },
  methods: {
    clearParams() {
      //this.form.materialid= null
      this.form.MaterialID = null;
      this.form.batchno = null;
      this.form.plineid = null;
      this.form.porderid = null;
      this.stepper = 1;
      this.valuematerial = null;
      this.valuepici = null;
    },
    //获取工厂信息
    async getFactoryID() {
      let _this = this;
      try {
        let res = await _httpClientApi.get(
          _httpClientApi.getApiPrefix() +
            "/system/ConvertFactoryID/getList/" +
            _this.user.site
        );
        if (res.code === 200) {
          _this.user.site = res.data.sapfactoryid;
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    /*     onConfirmmaterial(value,index) {
          this.valuematerial = this.columnsmaterial[index].materialname;
          this.form.materialid  = this.columnsmaterial[index].materialid;
          this.showPickermaterial = false;
        }, */
    /* onConfirmpici(value,index) {
      this.valuepici = this.columnspici[index].batchno;
      this.form.batchno  = this.columnspici[index].batchno;
      this.showPickerpici = false;
    }, */
    //打开扫描
    showScanner() {
      let _this = this;
      var FNScanner = _this.$ac.require("FNScanner");
      FNScanner.openScanner(
        {
          autorotation: true,
        },
        function (ret, err) {
          if (ret) {
            if (ret.eventType == "success" && ret.content != "") {
              _this.form.plineid =  ret.content;//+","+_this.form.plineid;
              //_this.queryEquip({ body: { equipCode: ret.content, siteKey: _this.user.site } })
            }
          } else {
            alert(JSON.stringify(err));
          }
        }
      );
    },
    //打开扫描
    showOrderScanner() {
      let _this = this;
      var FNScanner = _this.$ac.require("FNScanner");
      FNScanner.openScanner(
        {
          autorotation: true,
        },
        function (ret, err) {
          if (ret) {
            if (ret.eventType == "success" && ret.content != "") {
              _this.form.porderid = ret.content;
              _this.getproductionorder(_this.form.porderid);
            }
          } else {
            alert(JSON.stringify(err));
          }
        }
      );
    },

    //根据工艺单号获取获取订单信息
    async getproductionorder(pOrderID) {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() +
            "/ProductionOrder/GetList?POrderID=" +
            pOrderID
        );
        if (res.Message == null) {
          Toast.clear();
          _this.form.MaterialID = res.Data[0].MaterialID;
        } else {
          Toast.fail("未查询到订单数据");
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },

    //点击选择批次按钮
    /*    ChoosePici(){
         let _this = this;
         if(_this.form.materialid != "" && _this.form.materialid !=null && _this.form.materialid != undefined){
           this.getmaterialbatch();
           this.showPickerpici = true
         }else{
           Toast.fail("请先进行物料选择！")
           
         }
       }, */
    //根据⼯⼚代码获取所有物料信息
    /* async getmaterial(){
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            "/productionsiteexecute/getmaterial",
          {
            body: {
              factoryid: _this.user.site,
            },
          }
        );
        if (res.httpCode === 200) {
          Toast.clear();
          let shiftMap = res.data.map(item =>({materialid: item.materialid, materialname: item.materialname}));    
          _this.columnsmaterial = shiftMap;
        } else {
          Toast.fail(res.errMessage);
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    }, */
    //根据物料获取批次信息
    /*     async getmaterialbatch(){
          let _this = this;
          Toast.loading({
            mask: true,
            forbidClick: true,
            duration: 0,
            message: "Loading...",
          });
          try {
            let res = await _httpClient.post(
              _httpClient.getApiPrefix() +
                "/productionsiteexecute/getmaterialbatch",
              {
                body: {
                  materialid: _this.form.materialid,
                },
              }
            );
            if (res.httpCode === 200) {
              Toast.clear();    
              _this.columnspici = res.data.map(item =>({batchno: item.batchno}));
            } else {
              Toast.fail(res.errMessage);
            }
          } catch (e) {
            Toast.fail(JSON.stringify(e));
          }
        }, */
    //确认上料
    async confirmfeedmaterial() {
      let _this = this;
      let materialName = "";
      let mUnitID = "";
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      //获取物料信息
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() +
            "/MaterialBasic/GetList?MaterialID=" +
            _this.form.MaterialID
        );
        if (res.HttpCode === "200" && res.Total > 0) {
          materialName = res.Data[0].MaterialName;
          mUnitID = res.Data[0].PrdOrderDefaultUnit;
          this.submitMaterial(materialName, mUnitID);
        } else {
          Toast.clear();
          Toast.fail("获取物料信息失败,请重新输入");
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }

      /* try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            "/MaterialIntoPOProcess/SaveEntity",
          {
            body: {
              PLineID: _this.form.plineid,
              MachineID: _this.form.plineid,
              pOrderID: _this.form.porderid,
              materialID: _this.form.MaterialID,
              materialName: materialName,
              factoryID: _this.user.site,
              MaterialBatchID: _this.form.batchno,
              intoAmount: _this.stepper,
              ProductionIndex:0,
              MUnitID:"ZH",
              Creator:_this.user.userName,
              CreateDatetime:"",
              TextFlag:false
            },
          }
        );
        if (res.httpCode === 200 && res.data == 0 ) {
          Toast.clear();    
          Toast.success("操作成功");
          this.clearParams();
        } else {
          Toast.fail(res.errMessage);
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      } */
    },
    async submitMaterial(materialName, mUnitID) {
      let _this = this;
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/MaterialIntoPOProcess/SaveEntity",
          {
            body: {
              pLineID: _this.form.plineid,
              machineID: _this.form.plineid,
              pOrderID: _this.form.porderid,
              materialID: _this.form.MaterialID,
              materialName: materialName,
              factoryID: "TC00",
              materialBatchID: _this.form.batchno,
              intoAmount: _this.stepper,
              productionIndex: 0,
              mUnitID: mUnitID,
              creator: _this.user.userName,
              createDatetime: new Date(),
              textFlag: false,
            },
          }
        );
        if (res.Message == null) {
          Toast.clear();
          Toast.success("操作成功");
        } else {
          Toast.fail("失败：" + res.Message);
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
  },
};
</script>

<style>
body {
  background-color: white;
}

.table-title-class {
  background-color: #304156;
  color: #fff;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.buttongroup {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.container.dwo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttonLeft {
  position: fixed;
  bottom: 8px;
  float: left;
  width: 49%;
}

.formstyle {
  margin-top: 8px;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.radioteam {
  display: flex;
  align-items: center;
  padding-left: 13px;
  margin-top: 10px;
  margin-left: 34px;
  margin-bottom: 10px;
}

.buttonRight {
  position: fixed;
  bottom: 8px;
  float: right;
  left: 51%;
  width: 49%;
  background-color: #f22028;
  border-color: #f22028;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 50%;
  bottom: 3rem;
  overflow: scroll;
  right: 10px;
  width: 100%;
  z-index: 1;
}

.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}

.mg5 {
  margin-right: 5px;
}

.tag_margin {
  margin: 2px 5px;
}

.card_under {
  height: 100%;
  width: 100%;
  margin: auto;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
}

.card_icon {
  text-align: center;
  /* position: absolute; */
  height: 8rem;
  width: 80%;
  margin: 12% 10%;
  background: rgba(35, 180, 237, 1);
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.text {
  font-size: 18px;
  color: #4e4a67;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 600;
}

.text_small {
  font-size: 16px;
  color: red;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 700;
}

.text_scan {
  font-size: 16px;
  color: #4e4a67;
  margin: auto auto auto 20px;
  line-height: 1.5em;
  text-align: justify;
}

.divStyle {
  margin-left: 3px;
  margin-right: 3px;
}
</style>
